<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <style type = "text/css">
        div,span,p{
            width:140px;
            height:140px;
            border:1px solid black;
            margin:5px;
            background:#aaa;
            float:left;
            font-size:17px;
            font-family:Verdana;
        }

        div.mini{
            width:55px;
            height:55px;
            background:#aaa;
            font-size:12px;
        }

        div.hide{
            display:none;
        }
    </style>
    <script type ="text/javascript" src = "../jquery-1.7.2.js"></script>
    <script type = "text/javascript">
        $(function(){
            $("#btn1").click(function(){
                $("body div").css("background-color","#bbffaa");
            });

            $("#btn2").click(function(){
                $("body>div").css("background-color","#bbffaa");
            });

            $("#btn3").click(function(){
                $("#one+div").css("background-color","#bbffaa");
            });

            $("#btn4").click(function(){
                $("#one~div").css("background-color","#bbffaa");
            });

        });
    </script>
</head>
<body>
<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
<br>
<div id ="one" class = "one">
    id为one，class为one的div
    <div class = "mini">class为mini</div>
</div>

<div id = "two" class = "one" titlle = "test">
    id为two，class为one，tittle为test的div
    <div class = "mini" tittle = "other">class为mini，tittle为other</div>
    <div class = "mini" tittle = "test">class为mini，tittle为test</div>
</div>//这不算兄弟节点也算？？？？？？？？？？？？？？？？？


<div class = "one">
    <div class = "mini">class为mini</div>
    <div class = "mini">class为mini</div>
    <div class = "mini">class为mini</div>
    <div class = "mini"></div>
</div>
<div class = "one">
    <div class = "mini">class为mini</div>
    <div class = "mini">class为mini</div>
    <div class = "mini">class为mini</div>
    <div class = "mini" tittle = "tesst">class为mini，tittle为tesst</div>
</div>

<div style = "display:none" class = "none">display为none的div</div>

<div class = "hide">class为hide的div</div>

<div>
    包含input的type为hidde的div
    <input type ="hidden" size = "8"/>
</div>

<span class = "one" id = "span">..span元素...</span>
</body>
</html>